<template lang="html">
  <div id="dialog_city" class="touming" style="display:none;">
            <div class="touming_bai">
                <h3 class="touming_h3">
                    <span class="tou_sp"></span> 出发城市
                </h3>
                <h3 class="touming_h4" style="padding-top:0px;"></h3>
                <ul v-for="item in citydata">
                    <li class="li_fir" @click="citychuan(item.city1)"  :d-city="item.city1" d-check="0">{{item.city1}}</li>
                    <li d-city="上海" @click="citychuan(item.city2)" d-check="0">{{item.city2}}</li>
                    <li d-city="天津" @click="citychuan(item.city3)" d-check="0">{{item.city3}}</li>
                </ul>
              </div>
            <!-- <div class="qued_bai" onclick="f_dialogOk(this);">确定</div> -->
        </div>
</template>

<script>
import bus from '../../js/bus'
export default {
  data(){
    return{
      citydata:[]
    }
  },
  methods:{
    citychuan(data){
      bus.$emit('cityzhi',data)
    }
  },
  created(){
    this.axios.get('http://txspring.cn:8080/cityselet').then(res=>{
      console.log(res);
      this.citydata = res.data.data
    }).catch(err=>{
      console.log(err);
    })
  }
}
</script>

<style lang="css" scoped>
.touming {
    width: 100%;
    position: fixed;
    z-index: 400;
    bottom: 0px;
    left: 0px;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}
.touming_bai {
    margin-left: 2%;
    bottom: 60px;
    background-color: #FFF;
    border-radius: 5px;
    position: absolute;
    width: 96%;
}
.touming_h3 {
    width: 100%;
    padding: 10px 0px;
    display: block;
    font-size: 16px;
    border-bottom: 1px solid #dfdfdf;
}
.tou_sp, .top03, .top04 {
    font-size: 18px;
    color: #ffaf0f;
    padding-left: 20px;
    padding-right: 10px;
    background: url(../../../static/images/111_03.jpg) no-repeat 10px center;
    background-size: 16px;
}
.touming_h4 {
    width: 90%;
    margin-left: 15px;
    display: block;
    color: #666666;
    font-size: 16px;
    padding: 15px 0px;
}
.touming_bai ul {
    padding: 0px 15px;
}
.touming_bai ul li.li_fir {
    margin-left: 0px;
}
.touming_bai ul li {
    width: 31.6%;
    border: 1px solid #999999;
    border-radius: 5px;
    padding: 5px 0px;
    text-align: center;
    float: left;
    margin-left: 1.5%;
    font-size: 12px;
    color: #666666;
    position: relative;
    margin-bottom: 10px;
    display: block;
}
.qued_bai {
    margin-left: 2%;
    bottom: 10px;
    background-color: #FFF;
    border-radius: 5px;
    position: absolute;
    width: 96%;
    font-size: 16px;
    color: #333333;
    text-align: center;
    padding: 8px 0px;
}
</style>
